{% extends 'visualize.jinja' %}
{% block name %}Timeline{% endblock %}
{% block scripts %}
  {{ load_js('http://simile.mit.edu/timeline/api/timeline-api.js') }}
  {{ load_js('date') }}
  <script type="text/javascript">
    function clearVisualization() {
      $('#timeline').html('')
    }
    // TODO: dynamically set zoom according to range of dates
    function drawVisualization(data) {
      eventsource = new Timeline.DefaultEventSource()
      // create
      var bandInfos = [
        Timeline.createBandInfo({
          eventSource: eventsource,
          width: '70%', 
          intervalUnit: Timeline.DateTime.MONTH, 
          intervalPixels: 100
        }),
        Timeline.createBandInfo({
          eventSource: eventsource,
          width: '30%', 
          intervalUnit: Timeline.DateTime.YEAR, 
          intervalPixels: 200
        })
      ]
      bandInfos[1].syncWith = 0
      bandInfos[1].highlight = true
      tl = Timeline.create(document.getElementById('timeline'), bandInfos)
      // add events
      if(data.length) {
        date_attribute = $('input[name="date"]').val()
        // translate into timeline format
        events = {events:[]}
        for(i=0; i < data.length; i++) {
          evt = data[i]
          events['events'].push({
            'title': evt['name'],
            'link': evt['url'],
            'start': Date.parse(evt['metadata'][date_attribute]), // datejs.com w00t
            'description': evt['description']
          })
        }
        // load into timeline
        eventsource.loadJSON(events,"{{ url('') }}")
        // scroll timeline to earliest date
        tl.getBand(0).setCenterVisibleDate(eventsource.getEarliestDate())
        tl.getBand(0).setCenterVisibleDate(eventsource.getEarliestDate())
      }
      // redo layout on resize
      $(document).resize(tl.layout)
    }
  </script>
{% endblock %}
{% block fields %}
  date attribute: <input type="text" name="date" class="attribute" value="date"/>
{% endblock %}
{% block visualization %}
  <div id="timeline" style="height: 450px; border: 1px solid #aaa"></div>
{% endblock %}